<template>
    <div class="login">
      <div class="login-an"> 
       <div class="font">抖脉网络</div>   
      </div>
      <div class="login-container">
        <h2>登录</h2>
        <a-form class="mt15 flex-col" name="customized_form_controls" layout="inline">
          <a-form-item label="账号">
            <a-input type="text" v-model:value="params.mobilePhone" placeholder="请输入账号" />
          </a-form-item>
          <a-form-item label="密码" class="mt15">
            <a-input type="password" v-model:value="params.password" placeholder="请输入密码" />
          </a-form-item>
        </a-form>
        <div class="save-container">
          <a-checkbox v-model:checked="isSave">记住密码</a-checkbox>
        </div>
        <a-button class="login-button" type="primary" @click="onLogin">登录</a-button>
      </div>
    </div>
  </template>
  
  <script lang="ts" setup>
import { onMounted } from 'vue'
import { notification } from 'ant-design-vue'
import { reqGetSalt, reqLogin } from '../api/login'
import { reactive, toRefs } from 'vue'
import { useRouter, useRoute } from 'vue-router'
const router = useRouter()
const route = useRoute()
const state = reactive<{
  params: {
    mobilePhone: string
    password: string
  }
  isSave: boolean
}>({
  params: {
    mobilePhone: '',
    password: ''
  },
  isSave: false
})
onMounted(() => {
  console.log('mounted!')
  state.params.mobilePhone = localStorage.getItem('mobilePhone') || ''
  state.params.password = localStorage.getItem('password') || ''
  
})
function onLogin() {
  var withoutError = true
  if (!state.params.mobilePhone) {
    notification['warning']({
      message: '请输入用户名'
    })
    return
  }
  if (!state.params.password) {
    notification['warning']({
      message: '请输入密码'
    })
    return
  }
  getSalt()
}
function getSalt() {
  reqGetSalt({ mobilePhone: state.params.mobilePhone })
    .then((res: any) => {
      console.log(res.data.content.salt,123)
      loginByPassword(res.data.content.salt)
    })
    .catch((res: any) => {
      
    })
}
function loginByPassword(res: any) {
  console.log(res,456)
  reqLogin(state.params.mobilePhone, state.params.password, res)
    .then((res: any) => {
      localStorage.setItem('token', res.token)
      localStorage.setItem('remark', res.remark || '')
      console.log(res.data,789)
      if (state.isSave) {
        localStorage.setItem('mobilePhone', state.params.mobilePhone)
        localStorage.setItem('password', state.params.password)
      } else {
        localStorage.setItem('mobilePhone', '')
        localStorage.setItem('password', '')
      }
      if (res.data.resultStates === 0) {
        router.push({
          path: '/complete'
        })
      } else {
        router.push({
          path: '/'
        })
        notification['warning']({
        message: '账号密码错误'
      })
      }
      console.log(res.data.resultStates,789123)
    })
    .catch((res: any) => {
      notification['warning']({
        message: '账号密码错误'
      })
    })
    
}
const { params, isSave } = toRefs(state)
</script>

  
  <style scoped lang='less'>
  .login {
    background-color: #eee;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    height: 100vh;
    width: 100vw;
    .login-an {
      display: flex;
      flex-direction: column;
      background: #2b05d7;
     
      height: 100%;
      width:50%;
      padding:80px 120px;
      align-items: center;
    }
    .login-container {
      display: flex;
      flex-direction: column;
      background: #fff;
      padding: 250px 120px;
      height: 100%;
      width:50%;
      align-items: center;
    }
   .font{
    font-size: 70px;
    font-family:'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    color: #fff;
   }
    .flex-col {
      display: flex;
      flex-direction: column;
    }
  
    .login-button {
      margin-top: 40px;
      width: 100%;
    }
  }
  
  .save-container {
    display: flex;
    width: 100%;
    flex-direction: row;
    align-items: center;
    margin-top: 20px;
  }
  </style>